<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>课程表</title>
    <link href="../../css/base.css" rel="stylesheet">
    <link href="../../css/schedule-detail.css" rel="stylesheet">
    <link href="../../js/lib/LCalendar/LCalendar.css" rel="stylesheet">
</head>
<body id="schedule-detail">
<div class="container">
    <div class="head">
        <i class="icon iconfont icon-jiantou1 fl"></i>
        <div class="title">
            <span>课程表(1)</span>
            <div class="drop-down"><i class="icon iconfont icon-jiantou"></i></div>
            <div class="select-nav">
                <ul>
                    <li>课程表(1)</li>
                    <li>课程表(2)</li>
                </ul>
            </div>
        </div>
       <div class="nav fr">
            <div id="out">
                <div id="arrangement"><img src="../../images/arrangement.png"></div>
                <div id="vacate"><img src="../../images/vacate.png"></div>
                <div id="apply"><img src="../../images/apply.png"></div>
                <div id="homework"><a href="house_zuoye.html"><img src="../../images/homework.png"></a></div>
            </div>
            <div id="nav">
                <img src="../../images/nav.png">
            </div>
        </div>
    </div>

    <div class="content">
        <div class="empty"></div>
        <table>
            <thead>
            <tr>
                <th>时间</th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th><th>周六</th><th>周日</th>
            </tr>
            </thead>
            <tbody id="target">
            <tr>
                <td class="first"><input id="t0" type="text" value="08 : 30 - 09 : 30" readonly></td><td class="light">人名</td><td class="light">课名</td><td class="light">科目名</td><td></td><td></td><td></td><td></td>
            </tr>
            <tr>
                <td class="first"><input id="t1" type="text" value="09 : 30 - 10 : 30" readonly></td><td class="light">人名</td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
            <tr>
                <td class="first"><input id="t2" type="text" value="10 : 30 - 11 : 30" readonly></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
            <tr>
                <td class="first"><input id="t3" type="text" value="11 : 30 - 12 : 30" readonly></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
            <tr>
                <td class="first"><input id="t4" type="text" value="13 : 30 - 14 : 30" readonly></td><td></td><td class="light">数学</td><td></td><td></td><td></td><td></td><td></td>
            </tr>
            <tr>
                <td class="first"><input id="t5" type="text" value="14 : 30 - 15 : 30" readonly></td><td></td><td></td><td></td><td class="light">英语</td><td></td><td></td><td></td>
            </tr>
            <tr>
                <td class="first"><input id="t6" type="text" value="15 : 30 - 16 : 30" readonly></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
            <tr>
                <td class="first"><input id="t7" type="text" value="16 : 30 - 17 : 30" readonly></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
            <tr>
                <td class="first"><input id="t8" type="text" value="17 : 30 - 18 : 30" readonly></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
            </tbody>
        </table>
    </div>

</div>

<script src="../../js/rem.js"></script>
<script src="../../js/lib/jquery.js"></script>
<script src="../../js/lib/LCalendar/LCalendar.js"></script>
<script src="../../js/lib/layer_mobile/layer.js"></script>
<script>
    var vacate_flag = false;
    var apply_flag = false;

    /*下拉*/
    $('.drop-down').click(function () {
        if($(".drop-down i").hasClass("rotate")) {
            $(".drop-down i").removeClass('rotate');
        }else{
            $(".drop-down i").addClass('rotate');
        }
        $('.select-nav').fadeToggle(300,'swing');
    });

    /*右上角点击事件*/
    var flag = true;
    $('#nav').click(function () {
        if(flag){
            $("#arrangement").animate({ right:"1.7rem", top:"0.3rem" },function(){flag = false;});
            $("#vacate").animate({ right:"1.6rem", top:"1.2rem" });
            $("#apply").animate({ right:"0.9rem", top:"1.6rem" });
            $("#homework").animate({ right:"0.1rem", top:"1.5rem" });

        }else{
            $("#arrangement,#vacate,#apply,#homework").animate({ right:"0.66rem",top:"0.6rem"},function(){flag = true;});
        }
    });

    /*编辑时间*/
    $('.first input').each(function () {
        var trigger = '#' + $(this).prop('id');
        var calendar = new LCalendar();
        calendar.init({
            'trigger': trigger, //标签id
            'type': 'doubleTime' //date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择
        });
    });

    $('.first input').bind('input propertychange', function() {
        var str = $(this).val();
        str = str.replace(/ /g,'');
        str = str.replace(/:/g,' : ');
        $(this).val(str.replace(/-/,' - '));
    });

    function edit(){
        var arr = ['一','二','三','四','五','六','日'];
        var i = $(this).index()-1;
        var n = $(this).parent().index()+1;
        var day = arr[i];
        layer.open({
            content:
            '<div class="detail">' +
            '<h2>星期'+ day +'&nbsp;&nbsp;&nbsp;第'+ n +'节</h2>' +
            '<div class="detail-container">'+
            '<ul><li>语文</li><li>数学</li><li>英语</li><li>体育</li><li>历史</li><li>美术</li></ul>' +
            '<div class="tl"><input id="name" placeholder="输入名称（语文、数学...）" /><div class="period" data-time="1"><i class="icon iconfont icon-bi"></i><span>每周</span></div></div>' +
            ''+
            '<div class="remark"><input id="remark" placeholder="输入备注（教室、地址...）" /></div>'+
            '<div class="submit">确定</div>'+
            '</div>'+
            '</div>',
            style:'width:6rem; height:5.3rem; background-color:#eee; border-radius:0.2rem; overflow:hidden;'
        });
    }

    /*课程表编辑*/
    $("#target").on("click","tr td:not('.first')",edit);

    /*选择课程*/
    $(document).on('click','.detail li',function () {
        $(this).addClass('active');
        $(this).siblings().removeClass('active');
    });

    /*编辑课程确认*/
    $(document).on('click','.detail .submit',function () {
        layer.closeAll()
    });

    $('#vacate').click(function () {
        if(vacate_flag === false){
            vacate_flag = true;
            $(this).css('width','1rem');
            $(this).siblings().css('width','0.75rem');
            $('.empty').show();
            $("#arrangement a").prop('href','javascript:void(0)');
            $("#homework a").prop('href','javascript:void(0)');
            $("#target").off('click',"tr td:not('.first')");
            $("#target").on("click","tr td:not('.first')",function () {
                var arr = ['一','二','三','四','五','六','日'];
                var day = arr[$(this).index()-1];
                var n = $(this).parent().index()+1;
                var text = $(this).text();
                layer.open({
                    content: '您确定要在 星期'+day+' 第'+n+'节 【'+text+'】课请假吗？',
                    className:'vacate-box',
                    btn: ['确定', '取消'],
                    success: function(){
                        $('.layui-m-layercont').css({'height':'1rem','line-height':'1rem !important','font-size':'0.4rem'});
                        $('.layui-m-layer0 .layui-m-layerchild').css({'width':'55%'})
                    },
                    yes: function(index){
                        vacate_flag = false;
                        $("#vacate").css('width','0.75rem');
                        $("#arrangement a").prop('href','#');
                        $("#homework a").prop('href','house_zuoye.html');
                        $('.empty').hide();
                        $("table th:not('.first')").unbind('click');
                        $("#target").off('click',"tr td:not('.first')");
                        $("#target").on("click","tr td:not('.first')",edit);
                        layer.close(index);
                    }
                });
            });
            $("table th:not('.first')").click(function () {
                var text = $(this).text();
                layer.open({
                    content: '您确定要在 '+text+' 请假吗？',
                    className:'vacate-box',
                    btn: ['确定', '取消'],
                    success: function(){
                        $('.layui-m-layercont').css({'height':'1rem','font-size':'0.4rem'});
                        $('.layui-m-layer0 .layui-m-layerchild').css({'width':'55%'})
                    },
                    yes: function(index){
                        vacate_flag = false;
                        $("#vacate").css('width','0.75rem');
                        $("#arrangement a").prop('href','#');
                        $("#homework a").prop('href','house_zuoye.html');
                        $('.empty').hide();
                        $("table th:not('.first')").unbind('click');
                        $("#target").off('click',"tr td:not('.first')");
                        $("#target").on("click","tr td:not('.first')",edit);
                        layer.close(index);
                    }
                });
            })
        }else{
            vacate_flag = false;
            $("#vacate").css('width','0.75rem');
            $("#arrangement a").prop('href','#');
            $("#homework a").prop('href','house_zuoye.html');
            $('.empty').hide();
            $("#target").off('click',"tr td:not('.first')");
            $("#target").on('click',"tr td:not('.first')",edit);
        }
    });

    $('#apply').click(function () {
        if(apply_flag === false){
            apply_flag = true;
            $(this).css('width','1rem');
            $(this).siblings().css('width','0.75rem');
            $('.empty').show();
            $("#arrangement a").prop('href','javascript:void(0)');
            $("#homework a").prop('href','javascript:void(0)');
            $("table th:not('.first')").unbind('click');
            $("#target").off('click',"tr td:not('.first')");
            $("#target").on("click","tr td:not('.first')",function () {
                if($(this).hasClass('deep')){
                    $(this).removeClass('deep');
                }else{
                    $(this).addClass('deep');
                }
                if( $('.deep').length === 2 ){
                    var arr = ['一','二','三','四','五','六','日'];
                    var day0 = arr[$('.deep').eq(0).index()-1];
                    var n0 = $('.deep').eq(0).parent().index()+1;
                    var text0 = $('.deep').eq(0).text();
                    var day1 = arr[$('.deep').eq(1).index()-1];
                    var n1 = $('.deep').eq(1).parent().index()+1;
                    var text1 = $('.deep').eq(1).text();
                    layer.open({
                        content: '您确定要将 星期'+day0+' 第'+n0+'节 【'+text0+'】课和</br>'
                        +' 星期'+day1+' 第'+n1+'节 【'+text1+'】课对调 <span id="period" data-time="1">1周</span> 吗？',
                        className:'apply-box',
                        btn: ['确定', '取消'],
                        success: function(){
                            $('.layui-m-layercont').css({'height':'1.5rem','font-size':'0.4rem'});
                            $('.layui-m-layer0 .layui-m-layerchild').css({'width':'55%'});
                            /*修改调课周期*/
                            $("#period").click(function(){
                                var time = $(this).data('time');
                                if( time === 9 ){
                                    $(this).data('time',1);
                                    $(this).text('1周')
                                }else{
                                    $(this).data('time',parseInt(time)+1);
                                    $(this).text((parseInt(time)+1)+'周')
                                }
                            });
                        },
                        yes: function(index){
                            apply_flag = false;
                            $("#apply").css('width','0.75rem');
                            $("#arrangement a").prop('href','#');
                            $("#homework a").prop('href','house_zuoye.html');
                            $('.empty').hide();
                            var temp = $(".deep").eq(0).text();
                            $(".deep").eq(0).text($(".deep").eq(1).text()+'(调)');
                            $(".deep").eq(1).text(temp+'(调)');
                            $("#target td").removeClass('deep');
                            $("#target").off('click',"tr td:not('.first')");
                            $("#target").on("click","tr td:not('.first')",edit);
                            layer.close(index);
                        },
                        no: function () {
                            $("#target td").removeClass('deep');
                        }
                    });
                }
            });
        }else{
            apply_flag = false;
            $("#apply").css('width','0.75rem');
            $("#arrangement a").prop('href','#');
            $("#homework a").prop('href','house_zuoye.html');
            $('.empty').hide();
            $("#target td").removeClass('deep');
            $("#target").off('click',"tr td:not('.first')");
            $("#target").on('click',"tr td:not('.first')",edit);
        }
    });

    /*修改上课周期*/
    $(document).on('click','.period',function () {
        var time = $(this).data('time')>7?0:$(this).data('time');
        $(this).data('time',parseInt(time)+1);
        if(time == 0){
            $(this).find('span').text('每周')
        }else {
            $(this).find('span').text('每'+ (parseInt(time)+1) +'周')
        }
    });

    /*课程表刷新*/
    $('.select-nav ul li').click(function () {
        var txt = $(this).text();
        $(".title span").text(txt);
        $(".drop-down i").removeClass('rotate');
        $('.select-nav').hide();
    });

    /*初始化*/
    $('.select-nav ul li').eq(0).click();

</script>
</body>
</html>